import styled from "styled-components"
import { Input, Button } from "antd"
import { useCallback, useState } from "react"
const StyledChatContainer = styled.div`
    width:300px;
    height:500px;
    position:fixed;
    top:100px;
    left:50px;
    border-rideus:5px;
    border:1px solid #ccc;
    background:#fff;
`
const StyledChatBox = styled.div`
    width:100%;
    height:400px;
    overflow-x:auto;
    overflow-y:hidden;
    border-bottom:1px solid #ccc;
`

const ChatContainer = ({ chat, sendMsg }) => {
    const [msg, setMsg] = useState("")
    const send = useCallback(() => {
        if (!msg) return;
        sendMsg(msg)
    }, [msg])
    return (
        <StyledChatContainer>
            <StyledChatBox>
                {chat.map((item, key) => (
                    <div key={key}>
                        {item.msg}
                    </div>
                ))}
            </StyledChatBox>
            <Input.TextArea
                value={msg}
                onChange={({ target }) => setMsg(target.value)}
            />
            <Button block onClick={send}>发送</Button>
        </StyledChatContainer>
    )
}
export default ChatContainer